<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 一丶引入包 -->
    <!-- react核心包，提供react语法的核心功能 -->
    <script src="../../react18/react.development.js"></script>
    <!-- react的操作DOM的包，提供react操作DOM的功能 -->
    <script src="../../react18/react-dom.development.js"></script>
  </head>
  <!-- 二丶初步了解react -->
  <body>
    <!-- 在body中构建一个容器，用来接收虚拟DOM，渲染这个容器 -->
    <div id="app"></div>
    <script>
      // 创建一个虚拟DOM对象,接收的值为 第一个值为创建的标签(tag) 第二个值为该标签的属性(props) 第三个属性为该标签包含的子元素（children）；
      // const vDOM = React.createElement("h1", {}, "hello");

      /* 
        声明是虚拟DOM：
          *本质是Object类型的对象（一般对象）.
          *虚拟DOM比较“轻”————方法少，真实DOM比较“重”————方法多，使用在使用时虚拟DOM消耗更少性能，虚拟DOM是在react内部在用的，无需真实DOM身上那么多的属性
          *当数据更新以后，我们可以对比新旧虚拟DIM，得到差异，只更新差异化的真是DOM即可
          *虚拟DOM早晚会被react转为真是DOM，呈现爱页面上
      */

      // const vDOMfs = {
      //   tag: "div", //创建的标签
      //   props: {
      //     classname: "box,", //该标签的属性
      //   },
      //   children: [
      //     //创建的标签的子元素（内容）
      //     {
      //       tag: "p",
      //       props: {},
      //       children: "你好",
      //     },
      //     {
      //       tag: "span",
      //       props: {
      //         id: "span",
      //       },
      //       children: "你好",
      //     },
      //   ],
      // };

      // 缩略版本创建虚拟DOM

      const vDOMEm = React.createElement("em", {}, "这里是em");
      const vDomSpan = React.createElement("span", {}, vDOMEm);
      const vDOM = React.createElement(
        "div",
        { id: "box", className: "content" },
        "hello vDOM",
        "hello world",
        vDOMSpan
      );

      // 根据DOM中提供的容器，创建一个react虚拟DOM盛放的根容器（对象）

      const root = ReactDOM.createRoot(document.getElementById("app"));

      /*  
      ReactDOM方法:
            *属于是ReactDOM提供的一个方法
            *创建一个根容器对象，让React的组件或者虚拟DOM能在这个根容器中展示
            *接受一个参数，是一个DOM元素，可以喜欢则结构中的一个元素作为根容器（DOM操作选中，之前用DOM创建的元素变量会报错）
      */

      //通过根容器对象的render方法去渲染这个根容器
      root.render(vDOM);

      /* 
        render方法：
          *使用createRoot方法创建的一个根容器对象
          *这个对象内部有一个render方法，主要用来把render方法接受的组件或者虚拟DOM渲染成真是DOM，放在根容器中
          *当首次调用render方法的时候，容器内的所有元素DOM元素都会被替换成新渲染的真是DOM
          *再次调用render方法时，会使用react Diffing算法进行高效的对比更新
      */
    </script>
  </body>
</html>
